<template>
  <div class="root bottom">
    <div class="content">
      <section class="icp-id">京ICP备13018369号</section>

      <section class="tele">电话挂号010-56253825</section>

      <div class="place"></div>
      <section class="links">
        <a :href="item.href" rel="external nofollow" target="_blank" v-for="(item, index) in mockData" :key="index"
          ><p>{{ item.text }}</p></a
        >
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { linkType as HomeBottomLinkType } from './public.d.ts';

//服务器数据
const linkData: HomeBottomLinkType = [
  { href: 'www.baidu.com', text: '联系我们' },
  { href: 'www.baidu.com', text: '合作伙伴' },
  { href: 'www.baidu.com', text: '用户协议' },
  { href: 'www.baidu.com', text: '隐私协议' },
];

//改造到自己需要的数据
let mockData: HomeBottomLinkType = linkData.map((item) => ({
  href: `https://${item.href}`,
  text: item.text,
}));
</script>

<style scoped lang="scss">
.root {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background-color: #fafafa;
  height: 50px;
  font-size: 16px;
  & > * {
    cursor: pointer;
    color: $theme-color;
  }

  .content {
    line-height: 50px;
    height: 100%;

    margin: 0 auto;
    width: 1200px;
    color: black;
    display: flex;
    align-content: center;

    .icp-id {
      &:hover {
        color: $theme-color;
      }
      margin-right: 15px;
    }
    .tele {
      &:hover {
        color: $theme-color;
      }
    }
    .place {
      flex: 1;
    }
    .links {
      display: flex;
      a {
        text-decoration: none;
        color: black;
      }
      p {
        margin-right: 15px;
        &:hover {
          color: $theme-color;
        }
      }
    }
  }
}
</style>
